<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
</style>
</head>

<body>
<div id="app">
<div class="postEvaBox" v-if="postInfo.comment.length">
	<div class="postEvaList">
		<div class="item" v-for="(comment,commentIndex) in postInfo.comment">
			<div class="avatar"><img :src="comment.user_avatar" alt=""></div>
			<div class="aui-flex-col aui-flex-middle aui-flex-between">
				<div class="evaName" v-text="comment.user_nickname"></div>
				<div class="likeBtn" :class="{'on': comment.is_like == 1}" v-tap="[togEvaLike,comment]">{{ comment.comment_like_count }}</div>
			</div>
			<div class="evaDate">{{ Date.parse(comment.comment_addtime).toString('MM-dd HH:mm') }}</div>
			<div class="evaDetail" v-text="comment.comment_content" v-tap="[openReply,comment.comment_id]"></div>
			<div class="replyBox" v-if="comment.reply.length">
				<div class="replyItem" v-for="(reply,replyIndex) in comment.reply" v-if="replyIndex < 3"><span class="replyName">{{reply.user_nickname}}{{ reply.comment_userid == comment.comment_article_id ? '(作者)' : '' }}:</span>{{reply.comment_content}}</div>
				<div class="moreReply"><span class="right-arrow" v-tap="[openReply,comment.comment_id]">共{{ comment.reply.length }}条回复</span></div>
			</div>
		</div>
	</div>
	<div class="aui-border-t btmInfoBtn">已经到底啦</div>
	<div id="footer" style="height: 50px;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/dom7.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-tap.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var footerFlag = true;		//是否刚打开页面 需要打开footer的frm
var vm;
var vuedata = {
	userId: '',
	article_id: '',
	postInfo: {}
};
vm = new Vue({
	el: '#app',
	data: vuedata,
	methods: {
		//评论点赞
		togEvaLike: function(obj){
			api.ajax({
				url: BASE_URL + 'App/Article/commentLike',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						comment_id: obj.comment_id,
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					if(ret.msg == '取消成功'){
						obj.is_like = -1;
						obj.comment_like_count--;
					}else{
						obj.is_like = 1;
						obj.comment_like_count++;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		},
		//打开评论详情
		openReply: function(id){
			api.openWin({
				name: 'post_eva_reply_win',
				url: 'post_eva_reply_win.html',
				pageParam: {
					article_id: vuedata.postInfo.article_id,
					article_userid: vuedata.postInfo.article_userid,
					comment_id: id
				}
			});
		}
	}
});
apiready = function() {
	api.parseTapmode();
	vuedata.userId = getUserId();
	vuedata.article_id = api.pageParam.article_id;
	getData();

	//监听发表评论后刷新页面  并滚动到底部
	api.addEventListener({
		name: 'evaSendEvent'
	}, function(ret, err){
		getData('scrollBtm');
	});

	//监听发表回复后刷新页面
	api.addEventListener({
		name: 'replySendEvent'
	}, function(ret, err){
		getData();
	});

	//监听点赞后更新
	api.addEventListener({
		name: 'postLikeEvent'
	}, function(ret, err){
		getData();
	});


};
function getData(type){
	api.ajax({
		url: BASE_URL + 'App/Article/articleDetail',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				article_id: vuedata.article_id
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			vuedata.postInfo = ret.data;
			api.execScript({
				script:'changeData("#num","'+ vuedata.postInfo.article_comment_count +'");'
			});
			if(footerFlag){
				openChatFooter();
				footerFlag = false;
			}
			if(type == 'scrollBtm'){
				//滚动到页面底部
				setTimeout(function(){
					api.pageDown({
						bottom: true
					});
				},100);
			}
		}
	});
}


//打开评论footer
function openChatFooter(){
	api.openFrame({
		name: 'chat_footer',
		url: 'widget://html/chat_footer.html',
		rect: {
			x: 0,
			y: api.winHeight - 50,
			w: 'auto',
			h: 50
		},
		bounces: false,
		pageParam: {
			article_id: vuedata.postInfo.article_id,
			article_userid: vuedata.postInfo.article_userid,
		}
	});
}
</script>
</html>
